<template>
  <Card>
     <Button type="primary">
      <template #icon><PlusOutlined /></template>
     添加品牌
     </Button>
     <!--  margin-top: 15px;表单上15px margin  -->
     <Table 
      class="mt-15px"   
     :columns="columns" 
     :data-source="data" bordered
     :pagination="{
      position: ['bottomCenter'],
      current: 1,
      pageSize: 3,
      total: 1000, 
      pageSizeOptions: ['3', '6', '9', '12'],
      showQuickJumper: true,
      showSizeChanger: true,
      showTotal: (total) => `总共 ${total} 条`,
     }"
     >
     <!--   current: 1, // 当前页码
     pageSize: 3, // 每页条数
     total: 1000,// 总数
     pageSizeOptions: ['3', '6', '9', '12'],//指定每页可以显示多少条
     showQuickJumper: true,
      showSizeChanger: true,
     showTotal: (total) => `总共 ${total} 条`, -->
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'operator'">
      <Button  class="
              !text-orange-500
              !border-orange-500
              hover:(!text-orange-300
              !border-orange-300)
              mr-10px  
            ">
            <!-- 颜色黄色鼠标移入变色淡黄色 margin-right:10px; ！ 加权重-->
      <template #icon><EditOutlined /></template>
            更新品牌
      </Button>
      <Button danger>
            <template #icon><DeleteOutlined /></template>
            删除品牌
          </Button>
      </template>
    </template>
     
         
  </Table>
  </Card>
</template>

<script lang="ts" setup>
  import { Button,Card ,Table } from 'ant-design-vue';
  import { PlusOutlined,EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';

  // 每列 支持 居中
  const columns = [
    {
    title: '序号',
    dataIndex: 'key',
    width:80,
    align:"center",
  },
  {
    title: '品牌名称',
    dataIndex: 'name',
  },
  {
    title: '品牌',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: '操作',
    dataIndex: 'operator',
    width: 300,
  }, 
];
// 数据 调整
const data = [
  {
    key: '1',
    name: 'John Brown',
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
];
</script>
<!-- 大驼峰 
<plus-outlined /> +  包裹 jil激烈 符合
-->
